<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="通知主题" prop="remindTitle">
                <el-input v-model="queryParams.remindTitle" placeholder="通知主题" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="发送人" prop="sendName">
                <el-input v-model="queryParams.sendName" placeholder="发送人" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="接收人" prop="receiveName">
                <el-input v-model="queryParams.receiveName" placeholder="接收人" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="是否已读；0=未读；1=已读" prop="isRead">
                <el-input v-model="queryParams.isRead" placeholder="是否已读；0=未读；1=已读" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <!-- <el-form-item label="逻辑删除;0=未删除；1=已删除" prop="isDelete">
                <el-input v-model="queryParams.isDelete" placeholder="逻辑删除;0=未删除；1=已删除" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button type="danger" plain icon="el-icon-bell" size="mini" @click="getList(queryParams.isRead = 0)"
                    v-show="this.list > 0">未读：{{ this.list
                    }}</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['product:remind:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['product:remind:edit']">修改</el-button>
            </el-col> -->
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['product:remind:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['product:remind:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table @row-dblclick="t" v-loading="loading" :data="remindList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="提醒id" align="center" prop="id" />
            <el-table-column label="通知主题" align="center" prop="remindTitle">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top" width="300">
                        <span>{{ scope.row.remindTitle }}</span>
                        <div slot="reference">
                            <span
                                style="
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    display: -webkit-box;;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    text-overflow: ellipsis;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    overflow: hidden;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    -webkit-line-clamp: 2;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    -webkit-box-orient: vertical;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    white-space: pre-wrap; ">
                                {{ scope.row.remindTitle }}
                            </span>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <!-- <el-table-column label="提醒内容" align="center" prop="remindContent">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top" width="300">
                        <span>{{ scope.row.remindContent }}</span>
                        <div slot="reference">
                            <span
                                style="
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                display: -webkit-box;;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                text-overflow: ellipsis;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                overflow: hidden;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                -webkit-line-clamp: 2;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                -webkit-box-orient: vertical;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                white-space: pre-wrap; ">
                                {{ scope.row.remindContent }}
                            </span>
                        </div>
                    </el-popover>
                </template>
            </el-table-column> -->
            <el-table-column label="发送人" align="center" prop="sendName" />
            <el-table-column label="接收人" align="center" prop="receiveName" />
            <el-table-column prop="isRead" label="状态">
                <template slot-scope="scope">{{
                    scope.row.isRead | state1
                }}</template>
            </el-table-column>
            <el-table-column width="150px" :label="'发送时间'" align="center" prop="createTime">
                <!-- <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}-{H}-{}') }}</span>
                </template> -->
            </el-table-column>
            <!-- <el-table-column label="是否已读；0=未读；1=已读" align="center" prop="isRead">
                <template slot-scope="scope">
                    <el-button style="padding: 3px 0" type="text" @click="view(scope.$index, scope.row, 0)">未读</el-button>
                    <el-button style="padding: 3px 0" type="text" @click="view(scope.$index, scope.row, 1)">已读</el-button>
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="逻辑删除;0=未删除；1=已删除" align="center" prop="isDelete" /> -->
            <!-- <el-table-column label="提醒类型，预留" align="center" prop="remindType" /> -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['product:remind:edit']">修改</el-button> -->
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['product:remind:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改消息提醒对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="发件人" prop="sendBy">
                    <el-input v-model="form.sendName" placeholder="发件人" :disabled="true" />
                </el-form-item>
                <el-form-item label="收件人" prop="receiveBy">
                    <el-input v-model="form.receiveName" placeholder="收件人" :disabled="true" />
                </el-form-item>
                <el-form-item label="时间" prop="createTime">
                    <el-date-picker clearable v-model="form.createTime" type="date" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="时间" :disabled="true">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="通知主题" prop="remindTitle">
                    <el-input v-model="form.remindTitle" placeholder="通知主题" :disabled="true" />
                </el-form-item>
                <el-form-item label="提醒内容">
                    <el-input style="white-space: pre-wrap;word-break: break-all;" v-model="form.remindContent"
                        :min-height="192" type="textarea" :autosize="{ minRows: 8, maxRows: 4 }" :style="{ width: '100%' }"
                        :disabled="true" />
                </el-form-item>
                <!-- <el-form-item label="是否已读；0=未读；1=已读" prop="isRead">
                    <el-input v-model="form.isRead" placeholder="是否已读；0=未读；1=已读" />
                </el-form-item> -->
                <!-- <el-form-item label="逻辑删除;0=未删除；1=已删除" prop="isDelete">
                    <el-input v-model="form.isDelete" placeholder="逻辑删除;0=未删除；1=已删除" />
                </el-form-item> -->
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div> -->
        </el-dialog>
    </div>
</template>

<script>
import { myReceiveList, mySendList, listRemind, getRemind, delRemind, addRemind, updateRemind, mySendListCount } from "@/api/edit/remind";

export default {
    name: "Reminder",
    data() {
        return {
            list: '',
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 消息提醒表格数据
            remindList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                remindContent: null,
                sendBy: null,
                receiveBy: null,
                isRead: null,
                isDelete: null,
                remindType: null,
                remindTitle: null,
                receiveName: null,
                sendName: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            }
        };
    },

    created() {
        this.getList();
        this.Remind()
    },
    filters: {
        state1(int) {
            if (int == 0) { return "未读" };
            if (int == 1) { return "已读" };
            // if (int == 2) { return "审批通过" };
        },
    },
    methods: {
        Remind() {
            mySendListCount().then(res => {
                this.list = res
                this.$forceUpdate()
            })

        },
        //点击某一行
        t(row, column, cell, event) {
            console.log(row, column, cell, event);
            this.handleUpdate(row)
            this.view(row, 1)

        },

        //已读未读接口 index, 参数
        view(row, val) {
            console.log(row.id, val);
            updateRemind({ id: row.id, isRead: val }).then(res => {
                this.Remind()
                this.getList()

            })
            // console.log();
        },
        /** 查询消息提醒列表 */
        getList() {
            this.loading = true;
            mySendList(this.queryParams).then(response => {
                this.remindList = response.rows;
                console.log(JSON.stringify(this.remindList));
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                remindContent: null,
                sendBy: null,
                receiveBy: null,
                isRead: null,
                isDelete: null,
                remindType: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                receiveName: null,
                sendName: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加消息提醒";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getRemind(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "已发送消息";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateRemind(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addRemind(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除消息提醒编号为"' + ids + '"的数据项？').then(function () {
                return delRemind(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('product/remind/export', {
                ...this.queryParams
            }, `remind_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
<style lang="scss" scoped>
.el-input.is-disabled ::v-deep .el-input__inner {
    color: #606266;
    background-color: white;
    border: none;
    cursor: pointer;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
    color: #606266;
    background-color: white;
    border: none;
    cursor: pointer;
}
</style>